<template>
	<div class="edit-h5">
		<u-navbar placeholder title="群成员" autoBack></u-navbar>
		<main class="main">
			<div class="member">
				<ul class="list-uniapp" v-for="(pItem, pIndex) in member" :key="pIndex">
					<div class="title">{{pIndex===0?'群管理':'群成员'}}</div>
					<li class="list-item" v-for="(item, index) in pItem" :key="index">
						<aside class="aside" @click="handleMemberProfileShow(item)">
							<Avatar class="read-status-avatar" useSkeletonAnimation :url="item.avatar || ''" size="90rpx"/>
							<span class="name">{{ item.nick || item.userID }}</span>
							<span class="label" :class="sitem==='我'?'label01':''" v-for="sitem in handleRoleName(item)"
								:key="sitem">{{ sitem }}</span>
						</aside>
					</li>
					<div class="loadmore" v-if="pIndex===1">
						<u-loadmore :status="status" />

					</div>

				</ul>
			</div>
		</main>
	</div>
</template>

<script lang="ts" setup>
	import TUIChatEngine, {
		TUITranslateService,
		TUIStore,
		StoreName,
		TUIGroupService
	} from "@tencentcloud/chat-uikit-engine";
	import Avatar from "../../common/Avatar/index.vue";
	import { watchEffect, ref } from "../../../adapter-vue";
	import Icon from "../../common/Icon.vue";
	import delIcon from "../../../assets/icon/del-icon.svg";
	import { IGroupSelfInfo, IGroupMember } from "../../../interface";
	import { isUniFrameWork } from "../../../utils/env";
	import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
	import { checkUserInfo } from "../../../utils/checkLogin";
	const groupID = ref<any>('')
	const isShowDel = ref(false)
	const status = ref('loadmore')
	const props = defineProps({
		list: {
			type: Array,
			default: () => [],
		},
		total: {
			type: Number,
			default: () => 0,
		},
		isShowDel: {
			type: Boolean,
			default: () => false,
		},
		self: {
			type: Object,
			default: () => ({}),
		},
	});

	const totalMember = ref(0);
	const memberList = ref<Array<IGroupMember>>([]);
	const member : any = ref([[], []])
	const isShowDeleteBtn = ref(false);
	const self = ref<IGroupSelfInfo>({});

	onLoad((options : any) => {
		groupID.value = options.groupID
		isShowDel.value = options.isShowDel === 'true'
	})
	onShow(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					checkUserInfo()
					TUIGroupService.getGroupProfile({
						groupID: groupID.value,
					}).then((res) => {
						self.value = res.data.group.selfInfo
						totalMember.value = res.data.group.memberCount
						getMember()
					}).catch((error) => {
						console.log(error, "异常")
					})
				}

			}
		})
	})
	onReachBottom(() => {
		if (memberList.value.length < totalMember.value) {
			getMember('more')
		}

	})

	const getMember = async (type ?: string) => {
		if (type === 'more') {
			status.value = 'loading'
		}

		const options = {
			groupID: groupID.value,
			count: 20,
			offset: type && type === "more" ? memberList.value.length : 0,
		};
		await TUIGroupService.getGroupMemberList(options).then((res : any) => {
			if (type && type === "more") {
				memberList.value = [...memberList.value, ...res.data.memberList];
			} else {
				memberList.value = res.data.memberList;
			}
			member.value = [[], []]
			Array.from(memberList.value).map((item : any) => {
				switch (item?.role) {
					// 群主
					case TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER:
						member.value[0].push(item);
						break;
					// 群管理
					case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
						member.value[0].push(item);
						break;
					// 群成员
					case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
						member.value[1].push(item);
						break;
					default:
						break;
				}
				return item;
			});
			if (memberList.value.length >= totalMember.value) {
				status.value = 'nomoreText'
			}

		});
	};

	watchEffect(() => {
		// totalMember.value = props.total;
		// isShowDeleteBtn.value = props.isShowDel;
		// memberList.value = props.list as Array<IGroupMember>;
		// self.value = props.self;
	});

	const emits = defineEmits(["more", "del", "handleMemberProfileShow", "close"]);

	const handleRoleName = (item : any) => {
		let name : any = [];
		switch (item?.role) {
			case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
				name = [TUITranslateService.t("TUIGroup.管理员")];
				break;
			case TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER:
				name = [TUITranslateService.t("TUIGroup.群主")];
				break;
		}
		if (item.userID === self.value.userID) {
			name = name.concat([`${TUITranslateService.t("TUIGroup.我")}`]);
		}
		return name;
	};




	const handleMemberProfileShow = (user : any) => {
		emits("handleMemberProfileShow", user);
	};

</script>

<style lang="scss" scoped>
	@import url("../../../assets/styles/common.scss");

	page {
		background: #fff;
	}

	.member {
		flex: 1;
		background: #ffffff;
		.list-uniapp{
			border-bottom: 1px solid #ececee;
			&:last-child{
				border-bottom: 0;
			}
		}
		.title{
			padding: 24rpx 24rpx 0 24rpx;
			box-sizing: border-box;
			color: #777;
			font-size: 30rpx;
		}

		.list {
			display: flex;
			flex-direction: column;
			background: #f4f5f9;
			padding-top: 22px;

			&-uniapp {
				background: none;
			}

			&-item {
				padding: 13px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #ffffff;
				font-size: 14px;
				overflow: hidden;
				cursor: pointer;

				&:hover {
					background: #f1f2f6;
				}

				.aside {
					display: flex;
					align-items: center;
					width: 100%;
					overflow: hidden;

					.name {
						margin-left: 8px;
						font-weight: 400;
						font-size: 14px;
						color: #000000;
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.avatar {
		width: 36px;
		height: 36px;
		border-radius: 100%;
	}

	.edit-h5 {
		// position: fixed;
		width: 100%;
		height: 100%;

		// top: 0;
		// left: 0;
		// background: rgba(0, 0, 0, 0.5);
		// display: flex;
		// align-items: flex-end;
		// z-index: 1;
		.main {
			flex: 1;
		}

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.close {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 18px;
				color: #3370ff;
				letter-spacing: 0;
				line-height: 27px;
			}
		}

		&-footer {
			display: flex;

			.btn {
				flex: 1;
				border: none;
				background: #147aff;
				border-radius: 5px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 16px;
				color: #ffffff;
				letter-spacing: 0;
				line-height: 27px;
				padding: 8px 0;

				&:disabled {
					opacity: 0.3;
				}
			}
		}
	}

	.label {
		padding: 4rpx 16rpx;
		background: #FAB221;
		font-size: 24rpx;
		color: #fff;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.label01 {
		background: #00D107 !important;
	}

	.loadmore {
		padding-bottom:1rpx;
	}
</style>